<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>

<fmt:setLocale value="${config.locale.language}"/>
<fmt:setBundle basename="vn.ugame.bundle.Language" var="languageBundle"/>

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

        <title>UGame | Store</title>

        <script type="text/javascript" src="/js/jquery.min.js"></script>
        <script type="text/javascript" src="/js/jquery.raty.min.js"></script>
        <script type="text/javascript" src="/js/jquery.jcarousel.min.js"></script>      

        <link rel="stylesheet" href="/css/style.css" type="text/css"/>
        <link rel="stylesheet" href="/css/game.css" type="text/css"/>       
    </head>
    <body>
        <div id="wrapper">
            <jsp:include page="template/header.jsp" flush="false"/>
            <div id="main">
                <div id="game-banner">
                    <img src="<c:url value="/image-engine/${item.id}/4"/>" alt="">
                </div><!-- End #game-banner -->
                <div id="game-info">
                    <table cellpadding="0" cellspacing="0">
                        <tr>
                            <td valign="top">
                                <img src="<c:url value="/image-engine/${item.id}/2"/>" width="124" height="124" alt=""/>

                                <img src="/images/love.png" style="vertical-align: middle;" width="20" height="17" alt=""/>
                                <span><c:out value="${item.loveNumber}"/></span>
                            </td>
                            <td valign="top">
                                <h4><c:out value="${item.text}"/>
                                    <span><c:out value="(${item.price})"/></span></h4>

                                <p><span><fmt:message 
                                        key="ugame.game.size" 
                                        bundle="${languageBundle}"/>
                                    <c:out value=": "/></span>
                                    <c:out value="${item.size} bytes"/></p>
                                <p><span><fmt:message 
                                        key="ugame.game.downloads" 
                                        bundle="${languageBundle}"/>
                                    <c:out value=": "/></span>
                                    <fmt:formatNumber 
                                        value="${item.downloadNumber}" 
                                        type="number" 
                                        groupingUsed="false" />
                                </p>
                                <p><span><fmt:message 
                                        key="ugame.game.category" 
                                        bundle="${languageBundle}"/>
                                    <c:out value=": "/></span>
                                    <c:out value="${item.category.text}"/></p>
                                <p><span><fmt:message 
                                        key="ugame.game.updated" 
                                        bundle="${languageBundle}"/>
                                    <c:out value=": "/></span>
                                    <fmt:formatDate 
                                        type="date" 
                                        value="${item.modifiedDate}"/>
                                </p>

                                <p><c:out value="${item.summary}"/></p>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <a href="#" id="btn-download">
                                    <fmt:message 
                                        key="ugame.game.btn.download" 
                                        bundle="${languageBundle}"/></a>
                                <a href="#" id="btn-love">
                                    <fmt:message 
                                        key="ugame.game.btn.love" 
                                        bundle="${languageBundle}"/></a>
                                <a href="#" id="btn-share">
                                    <fmt:message 
                                        key="ugame.game.btn.share" 
                                        bundle="${languageBundle}"/></a>
                            </td>
                        </tr>
                    </table>
                </div><!-- End #game-info -->
                <div id="game-description">
                    <c:out escapeXml="false" value="${item.description}"/>
                </div><!-- End #game-description -->
                <div id="game-screen-shot">
                    <div id="game-screen-shot-slider">
                        <ul>
                            <c:forEach items="${screenShots}" var="image">
                                <li><a href="#"><img src="<c:url value="${image.path}" />" width="224" alt=""></a></li>
                            </c:forEach>
                        </ul>
                        <a href="#" id="screen-back"></a>
                        <a href="#" id="screen-next"></a>
                    </div><!-- End #game-screen-shot-slider -->
                </div><!-- End #game-screen-shot -->
                <div id="game-high-score">
                    <img src="/images/high-score.png" alt="">
                </div><!-- End #game-high-score -->
                <div id="game-relate">
                    <img src="/images/game-relate.png" alt="">
                </div><!-- End #game-relate -->
                <div id="game-comment">

                    <p id="comment-header">
                        <fmt:message 
                            key="ugame.game.comment" 
                            bundle="${languageBundle}"/>
                    </p>
                    
                    <c:forEach items="${comments}" var="comment">
                        <div class="comment-item">
                            <p class="comment-name">
                                <c:out value="${comment.account.username}"/>
                                <span>
                                    <c:out value="("/>
                                    <fmt:formatDate
                                        value="${comment.createdDate}"
                                        pattern="hh:mm"/>
                                    <fmt:formatDate 
                                        type="date"
                                        value="${comment.createdDate}"/>
                                    <c:out value=") :"/>
                                </span>
                            </p>

                            <p class="comment-content">
                                <c:out value="${comment.content}"/>
                            </p>
                        </div><!-- End .comment-item -->
                    </c:forEach>
                    <div id="comment-form">
                        <table cellspacing="0" cellpadding="0">
                            <tr>
                                <td colspan="2">
                                    <div>
                                    <textarea id="txt-comment">Viết bình luận của bạn vào đây ;)</textarea>
                                        </div>
                                </td>
                            </tr>
                            <tr>
                                <td><input type="text" id="txt-captcha">
                                    <img src="/images/captcha.png" style="vertical-align: middle;" alt="">
                                </td>
                                <td><a href="#" id="btn-send">
                                        <fmt:message 
                                            key="ugame.game.btn.send" 
                                            bundle="${languageBundle}"/>
                                    </a></td>
                            </tr>
                        </table>
                    </div><!-- End #comment-form -->
                </div><!-- End #game-comment -->
                <div id="category-nav">
                    <table cellpadding="0" cellspacing="0">
                        <tr>
                            <td>
                                <a href="#" onclick="return false;" id="category">
                                    <fmt:message 
                                        key="ugame.categories" 
                                        bundle="${languageBundle}"/>
                                </a>
                            </td>
                            <td>
                                <a href="#">
                                    <fmt:message 
                                        key="ugame.top-new" 
                                        bundle="${languageBundle}"/>
                                </a>
                            </td>
                            <td>
                                <a href="#">  
                                    <fmt:message 
                                        key="ugame.top-rate" 
                                        bundle="${languageBundle}"/>
                                </a>
                            </td>
                            <td>
                                <a href="#">
                                    <fmt:message 
                                        key="ugame.hot" 
                                        bundle="${languageBundle}"/>
                                    <span class="hot">!</span>
                                </a>
                            </td>
                        </tr>
                    </table>
                </div>
                <!-- End #category-nav -->
                <div id="category-sub-nav">
                    <c:forEach var="category" items="${categories}">
                        <a href="/<c:url value="${category.name}"/>">
                            <c:out value="${category.text}"/>
                        </a>
                    </c:forEach>
                </div>
                <!-- End #category-sub-nav -->
            </div>
            <!-- End #main -->
            <jsp:include page="template/footer.jsp" flush="false"/>

            <div class="clear"></div>
        </div>
        <!-- End #wrapper-->
        <script type="text/javascript" src="/js/custom.js"></script>
        <script type="text/javascript" src="/js/item.js"></script>
    </body>
</html>